<template>
  <div>
    <topTitle
      :titleText="titleText"
      @gobackTriser="goBack"
      :back="back"
    ></topTitle>
    <div class="mainCon">
      <el-form
        :model="formData"
        ref="formData"
        label-width="150px"
        class="demo-formData"
      >
        <el-row :gutter="20">
          <el-col :span="16">
            <div class="detailBox">
              <p class="detailTitleBox">理赔信息</p>
              <div class="statusStyle">
                <div class="iconBox">
                  <i
                    v-if="
                      formData.claimsStatus === 'LAUNCHED' ||
                      status === 'CHECKING'
                    "
                    :class="
                      'icon iconfont icondengdai ' + formData.claimsStatus
                    "
                  ></i>
                  <i
                    v-else
                    :class="
                      'icon iconfont iconyiqueren ' + formData.claimsStatus
                    "
                  ></i>
                </div>
                <div class="status">
                  <p :class="'statusText ' + formData.claimsStatus">
                    {{ formData.statusDesc }}
                  </p>
                </div>
                <div class="btnBox">
                  <el-button
                    type="primary"
                    @click="toAgainEdit"
                    class="commonBtn confirmBtn editBtn"
                    v-if="
                      formData.claimsStatus == 'CHECKING' && userType == 'JC'
                    "
                  >
                    <span>修改资料，再次提交</span>
                  </el-button>
                  <el-button
                    type="primary"
                    @click="completionVoucher"
                    class="commonBtn confirmBtn"
                    v-if="formData.claimsStatus == 'SUCCESS'"
                  >
                    <span>理赔完成凭证</span>
                  </el-button>
                  <contractEnclosureDialog
                    v-if="uploadLaborFile"
                    dialogTitle="理赔完成凭证"
                    :tableData="
                      formData.claimsSuccessList == null
                        ? []
                        : formData.claimsSuccessList
                    "
                    @closeDialog="hiddenLaborDialog"
                  ></contractEnclosureDialog>
                </div>
              </div>
              <div class="grid-content bg-purple tableBox">
                <table cellspacing="0" cellpadding="0" class="detailTable">
                  <tbody>
                    <tr>
                      <td class="title">理赔单号</td>
                      <td>{{ formData.claimsOrder }}</td>
                      <td class="title">理赔金额</td>
                      <td>{{ formData.claimsAmount }}元</td>
                    </tr>

                    <tr>
                      <td class="title">理赔原因</td>
                      <td
                        colspan="3"
                        style="line-height: 25px; min-height: 41px"
                      >
                        {{ formData.claimsReasonStr }}
                      </td>
                    </tr>
                    <tr>
                      <td class="title">联系人</td>
                      <td>{{ formData.linkName }}</td>
                      <td class="title">联系电话</td>
                      <td>{{ formData.linkTel }}</td>
                    </tr>
                    <tr>
                      <td class="title">申请日期</td>
                      <td colspan="3">{{ formData.createTime }}</td>
                    </tr>
                  </tbody>
                </table>
              </div>
              <div class="materialBox">
                <div class="materialTitBox">
                  <img
                    src="../../../static/img/newInsurance/zl.png"
                    alt=""
                  /><span>理赔资料</span>
                </div>
                <div class="fileBox">
                  <p class="fileName">1.索赔通知书</p>
                  <uploadResult
                    style="margin: 15px 0 0 14px !important"
                    :resultList="
                      formData.claimNoticesFileList == null
                        ? []
                        : formData.claimNoticesFileList
                    "
                    :showDownload="true"
                    :showDelete="false"
                    :mark="mark"
                  />
                  <p class="fileName">2.行政处罚决定书及农民工工资拖欠明细</p>
                  <uploadResult
                    style="margin: 15px 0 0 14px !important"
                    :resultList="
                      formData.xzAndSalaryFileList == null
                        ? []
                        : formData.xzAndSalaryFileList
                    "
                    :showDownload="true"
                    :showDelete="false"
                    :mark="mark"
                  />
                  <p class="fileName">3.保险单复印件</p>
                  <uploadResult
                    style="margin: 15px 0 0 14px !important"
                    :resultList="
                      formData.insuranceFileList == null
                        ? []
                        : formData.insuranceFileList
                    "
                    :showDownload="true"
                    :showDelete="false"
                    :mark="mark"
                  />
                  <p class="fileName">4.其他</p>
                  <uploadResult
                    style="margin: 15px 0 0 14px !important"
                    :resultList="
                      formData.otherFileList == null
                        ? []
                        : formData.otherFileList
                    "
                    :showDownload="true"
                    :showDelete="false"
                    :mark="mark"
                  />
                </div>
              </div>
            </div>
            <div class="submitBox">
              <el-button
                type="primary"
                @click="completionOfClaims"
                class="commonBtn confirmBtn"
                v-if="formData.claimsStatus == 'LAUNCHED' && userType == 'BX'"
              >
                <span>理赔完成</span>
              </el-button>
              <el-button
                type="primary"
                @click="returnData"
                class="commonBtn confirmBtn"
                v-if="formData.claimsStatus == 'LAUNCHED' && userType == 'BX'"
              >
                <span>退回</span>
              </el-button>
            </div>
          </el-col>
          <el-col :span="8">
            <div class="grid-content bg-purple">
              <div class="guaranteeInfoBox">
                <div class="title">
                  <img
                    src="../../../static/img/newInsurance/bh.png"
                    alt=""
                  /><span>保函</span>
                </div>
                <div>
                  <p class="infoName">投保项目名称</p>
                  <p class="infoCon mB">{{ formData.projectName }}</p>
                </div>
                <div>
                  <p class="infoName">投保企业</p>
                  <p class="infoCon mB">{{ formData.pbName }}</p>
                </div>
                <div>
                  <p class="infoName">保险保函</p>
                  <p class="infoCon mB8">
                    保单号：<span>{{ formData.insureOrder || '--' }}</span>
                  </p>
                  <p class="infoCon mB8">
                    担保金额：<span>￥{{ formData.insureAmount || '--' }}</span>
                  </p>
                  <p class="infoCon mB8">
                    担保期限：<span
                      >{{ formData.startDate || '--' }}至{{
                        formData.lastDate || '--'
                      }}</span
                    >
                  </p>
                  <p class="infoCon mB8">
                    承保机构：<span>{{ formData.insureOrgStr || '--' }}</span>
                  </p>
                  <p class="infoCon mB8">
                    保函类型：<span>{{ formData.insureTypeStr || '--' }}</span>
                  </p>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <el-dialog
      title="上传理赔完成凭证"
      :visible.sync="DialogVisible"
      @close="closeDialog"
      :modal-append-to-body="false"
      :append-to-body="true"
    >
      <el-form :model="formDataFiles" :rules="Rule" ref="formDataFiles">
        <el-form-item
          prop="upLoadFile"
          label="理赔完成凭证"
          class="upLoadDomContainer"
          label-width="120px"
        >
          <uploadAnnex
            @getFileList="getFileList"
            :limitationFactor="limitationFactor"
            :upLoadFile="upLoadFile"
          />
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <uploadResult
              style="margin-left: 120px"
              :resultList="upLoadFile"
              @callBackResult="getFile"
            />
          </el-col>
        </el-row>
        <div style="text-align: right">
          <el-button @click.native="closeDialog" class="commonBut cancelBtn"
            >取消</el-button
          >
          <el-button
            type="primary"
            @click.native="saveFiles"
            class="commonBut saveBtn"
            :loading="isSaveLoading"
            >提交</el-button
          >
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'claimsDetail',
  data() {
    var checkUpLoadFile = (rule, value, callback) => {
      if (this.upLoadFile.length == 0) {
        return callback(new Error('请上传证书附件'))
      } else {
        callback()
      }
    }
    return {
      titleText: '理赔详情',
      back: true,
      formData: {},
      mark: 'claimsDetail',
      id: '',
      limitationFactor: {
        uploadAnnexUrl: 'api-f/files/upload', //自定义上传文件接口地址
        upLoadFileLength: 5, //自定义上传附件的个数设置
        fileSize: 5, //自定义上传文件最大设置
        formatType: 'typeFive', //自定义上传格式校验类型
        fileId: 'salaryExcel', //自定义id解决一个页面包含多个上传附件
        uploadFormId: 'salaryExcelForm', //自定义id解决一个页面包含多个上传附件
        uploadBtnType: 'typeOne', //自定义上传按钮类型
        messagetip:
          '要求格式为png，jpg，jpeg，doc，docx，xls，xlsx，pdf格式，附件大小不超过5M', //自定义报错提示语
        methodTip:
          '请上传索赔通知书，附件格式支持png，jpg，jpeg，doc，docx，xls，xlsx，pdf，最多上传5个附件',
      },
      oldSrcList: [],
      srcList: [],
      upLoadFile: [],
      Rule: {
        upLoadFile: [
          {
            required: true,
            validator: checkUpLoadFile,
            trigger: 'blur',
          },
        ],
      },
      DialogVisible: false,
      formDataFiles: {
        fileList: [],
      },
      isSaveLoading: false, //完成理赔提交loading
      userType: '',
      uploadLaborFile: false,
    }
  },
  watch: {
    upLoadFile(val) {
      if (val.length > 0) {
        this.$refs.formDataFiles.clearValidate('upLoadFile')
      }
    },
  },
  async created() {
    this.id = this.$route.query.id
    if (this.$store.state.userType == 'MONITOR') {
      this.userType = 'JC'
    }
    await this.getUserType() //获取是否为保险业务员角色
    this.getDetail()
  },
  methods: {
    goBack() {
      this.$router.push({
        path: '/home/newInsurance/insuranceOrder',
        name: 'insuranceOrder',
        query: {
          activeName: 'second',
        },
      })
      this.$store.commit('GOBACK_NAME', {
        oldUrl: '/home/newInsurance/insuranceOrder',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
    getDetail() {
      this.axios({
        method: 'post',
        url: 'api-d/depositInsClaims/expand/detail',
        data: {
          id: this.id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.formData = response.data.result
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    //退回
    returnData() {
      this.$confirm(
        '完成退回操作后，状态变更为“材料复核中”，劳动监察可修改理赔信息及材料，并再次提交，确认退回?',
        '退回提示',
        {
          confirmButtonText: '退回',
          cancelButtonText: '取消',
          type: 'warning',
        }
      )
        .then(() => {
          this.sureReturn()
        })
        .catch(() => {
          // this.$message.error("删除失败");
        })
    },
    sureReturn() {
      this.axios({
        method: 'post',
        url: 'api-d/depositInsClaims/expand/return',
        data: {
          id: this.formData.id,
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message({
              message: '退回成功',
              type: 'success',
            })
            this.getDetail()
          } else {
            this.$message({
              message: response.data.errorMsg,
              type: 'error',
            })
          }
        })
        .catch((error) => {
          this.$message.error('退回失败')
        })
    },
    //    理赔完成
    getFileList(val) {
      this.oldSrcList.push(val)
      this.srcList.push(val)
    },
    getFile(val) {
      this.upLoadFile = val
    },
    completionOfClaims() {
      this.DialogVisible = true
      this.upLoadFile = []
    },
    closeDialog() {
      this.$refs['formDataFiles'].resetFields()
      this.DialogVisible = false
    },
    saveFiles() {
      this.$refs['formDataFiles'].validate((valid) => {
        if (valid) {
          this.isSaveLoading = true
          this.submitFiles()
        } else {
          return false
        }
      })
    },
    submitFiles() {
      this.axios({
        method: 'post',
        url: 'api-d/depositInsClaims/expand/finish',
        data: {
          id: this.formData.id,
          files: JSON.stringify(this.upLoadFile),
        },
      })
        .then((response) => {
          if (!response.data.hasError) {
            this.$message.success('提交成功')
            this.getDetail()
            this.DialogVisible = false
          } else {
            this.$message.error(response.data.errorMsg)
          }
          this.isSaveLoading = false
        })
        .catch((error) => {
          this.isSaveLoading = false
        })
    },
    getUserType() {
      return this.axios({
        method: 'get',
        url: 'api-u/users/current',
      })
        .then((response) => {
          if (
            !response.data.hasError &&
            response.data.sysRoles &&
            response.data.sysRoles.length
          ) {
            response.data.sysRoles.forEach((v) => {
              if (v.code === 'INSURANCE_SALESMAN') {
                this.userType = 'BX'
              }
            })
          } else {
            this.$message.error(response.data.errorMsg)
          }
        })
        .catch((error) => {
          if (error.response) {
            this.$message.error(error.response.data)
          }
        })
    },
    // 理赔完成凭证
    completionVoucher() {
      this.uploadLaborFile = true
    },
    hiddenLaborDialog() {
      this.uploadLaborFile = false
    },
    toAgainEdit() {
      this.$router.push({
        path: '/home/newInsurance/addSettlementClaims',
        name: 'addSettlementClaims',
        query: {
          id: this.formData.id,
          type: 'edit',
          mark: 'againEdit',
        },
      })
      this.$store.commit('CHANGE_SLIDER_NAME', {
        oldUrl: '/home/newInsurance/insuranceOrder',
        newUrl: this.$router.currentRoute.fullPath,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.mainCon {
  padding: 24px;
  font-size: 14px;
  color: #333;
  .detailBox {
    border: 1px solid #dcdfe6;
    .detailTitleBox {
      height: 36px;
      background: #f5f7fa;
      color: #999;
      line-height: 36px;
      padding-left: 24px;
      border-bottom: 1px solid #dcdfe6;
    }
    .materialBox {
      padding: 0 24px 24px;
      .materialTitBox {
        font-size: 16px;
        color: #242c3b;
        font-weight: 700;
        img {
          vertical-align: middle;
          margin-right: 8px;
          margin-top: -3px;
        }
      }
      .fileBox {
        margin-top: 24px;
        margin-left: 20px;
        .fileName {
          font-size: 14px;
          color: #333;
          font-weight: 500;
        }
      }
    }
  }
  .guaranteeInfoBox {
    border: 1px solid #dcdfe6;
    padding: 24px;
    background: #f9f9f9;
    border-radius: 8px;
    .title {
      font-size: 18px;
      color: #242c3b;
      font-weight: 700;
      margin-bottom: 28px;
      img {
        vertical-align: middle;
        margin-right: 8px;
        margin-top: -3px;
      }
    }
    .infoName {
      font-size: 14px;
      color: #333;
      font-weight: 700;
      margin-bottom: 8px;
    }
    .infoCon {
      font-size: 14px;
      color: #333;
      font-weight: 400;
    }
    .mB {
      margin-bottom: 28px;
    }
    .mB8 {
      margin-bottom: 8px;
    }
  }
  form.el-form.demo-formData {
    width: 100%;
    display: inline-block;
    text-align: left;
    .tableBox {
      margin: 0 24px 24px;
    }
    // table{
    //     width: 100%;
    //     border-top: 1px solid #d5dfe8;
    //     border-left: 1px solid #d5dfe8;
    //     td{
    //         padding: 0 18px;
    //         height: 41px;
    //         line-height: 41px;
    //         border-bottom: 1px solid #d5dfe8;
    //         border-right: 1px solid #d5dfe8;
    //     }
    //     .title{
    //         width: 100px;
    //         background-color: #f5f7fc;
    //         font-weight: 500;
    //         text-align: right;
    //     }
    //     .general{
    //         color: #6dd400;
    //     }
    //     .import{
    //         color: #fa6400;
    //     }
    //     .serious{
    //         color: #e02020;
    //     }
    // }
  }
  .CHECKING {
    color: #ffa449;
  }
  .SUCCESS {
    color: #06ac15;
  }
  .LAUNCHED {
    color: #3189ea;
  }
  .statusStyle {
    padding: 24px 24px 0;
    position: relative;
    .btnBox {
      position: absolute;
      top: 2px;
      right: 24px;
      text-align: center;
      .commonBtn {
        width: 136px;
        height: 36px;
        display: block;
        margin-top: 22px;
      }
      .cancleBtn {
        border-color: #999 !important;
        background-color: #fff !important;
        color: #666 !important;
      }
      .editBtn {
        width: 150px !important;
      }
    }
  }
  .iconBox {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    .iconfont {
      font-size: 36px;
    }
  }
  .status {
    display: inline-block;
    margin-left: 10px;
    .statusText {
      font-size: 20px;
      font-weight: 700;
      margin-top: 6px;
    }
  }
  .submitBox {
    height: 100px;
    text-align: center;
    .commonBtn {
      width: 136px;
      height: 36px;
      position: relative;
      top: 50%;
      transform: translateY(-50%);
    }
    .cancleBtn {
      border-color: #999 !important;
      background-color: #fff !important;
      color: #666 !important;
    }
  }
  tr,
  td,
  th,
  thead,
  tbody {
    border-color: #dcdfe6;
  }
  tr {
    border: 1px solid #dcdfe6;
  }
}
.detailTable .title {
  width: 130px !important;
}
@media only screen and (max-width: 1440px) {
  .detailTable .title {
    width: 120px !important;
  }
}
</style>
